<style lang="less" scoped>
.booking-box {
  padding-bottom: 0.8rem;
  .orange {
    color: #fb6165;
  }
  .am-flexbox {
    background-color: #fff;
    padding: 0.15rem;
    padding-bottom: 0;
  }
  .booking-info {
    border-bottom: 0.005rem solid #ddd;
    padding-bottom: 0.1rem;
    margin-bottom: 0.1rem;
    .pic {
      width: 0.8rem;
      img {
        width: 100%;
        height: 1.1rem;
      }
    }
  }
  .booking-sel {
    border-top: 0.005rem solid #ddd;
    border-bottom: 0.005rem solid #ddd;
    padding-bottom: 0.1rem;
    margin-bottom: 0.1rem;
    .split,
    .hold {
      margin: 0 auto;
      width: 1rem;
      height: 1rem;
      line-height: 1rem;
      margin-bottom: 0.1rem;
      text-align: center;
      color: #fff;
      border-radius: 50%;
      background-color: #fb6165;
    }
    .hold {
      background-color: #888;
    }
    p {
      text-align: center;
      font-size: 0.13rem;
      color: #888;
    }
  }
  .booking-tip {
    padding:0 0.15rem;
    li {
      color:#888;
      float: left;
      margin-right: 0.1rem;
      font-size: 0.14rem;
      span {
        float: left;
        display: block;
        font-size: 0.1rem;
        height: 0.05rem;
        width: 0.05rem;
        color: #fff;
        background-color: #fb6165;
        margin:0.08rem 0.04rem 0 0;
        text-align: center;
        border-radius: 0.08rem;
        background-clip: padding-box;
      }
    }
  }
  .minus,
  .plus {
    box-sizing: border-box;
    color: #fb6165;
    cursor: pointer;
    display: inline-block;
    width: 0.25rem;
    height: 0.25rem;
    line-height: 0.22rem;
    text-align: center;
    border: 0.01rem solid #ccc;
    border-radius: 0.05rem;
    margin-right: 0.1rem;
  }
  .plus {
    line-height: 0.2rem;
    margin-left: 0.1rem;
    margin-right: 0;
  }
}
</style>
<template>
  <div>
    <div v-show="!isLoad" class="am-loading page">
      <i class="am-icon loading" aria-hidden="true"></i>
      <div class="am-loading-text">加载中</div>
    </div>
    <div class="booking-box" v-show="isLoad">
      <div class="booking-info am-flexbox">
        <div class="pic"><img :src="info.imgUrl" /></div>
        <div class="am-flexbox-item">
          <h3>{{info.store}}</h3>
          <p>
            <b>主题: {{info.title}}</b>
          </p>
          <p>预定场次: {{info.date}}</p>
          <p>建议人数: {{info.peoples}}人</p>
        </div>
      </div>
      <div class="booking-sel am-flexbox">
        <div class="am-flexbox-item">
          <div class="split">我要拼场</div>
          <p>剩余3个席位</p>
        </div>
        <div class="am-flexbox-item">
          <div class="hold">我要包场</div>
          <p>体验人数达6人可包场</p>
        </div>
      </div>

      <div class="am-list">
        <div class="am-list-item">
          <div class="am-list-content">
            体验人数
          </div>
        </div>
        <div class="am-list-item">
          <div class="am-list-content">先生:</div>
          <div>
            <span @click="minus('male')" class="minus">-</span>
            <span>{{male}}</span>
            <span @click="plus('male')" class="plus">+</span>
          </div>
        </div>
        <div class="am-list-item">
          <div class="am-list-content">女士:</div>
          <div>
            <span @click="minus('lady')" class="minus">-</span>
            <span>{{lady}}</span>
            <span @click="plus('lady')" class="plus">+</span>
          </div>
        </div>
        <div class="am-list-item">
          <div class="am-list-content"></div>
          <div>￥{{info.price}} /人&nbsp;&nbsp;共计&nbsp;{{male+lady}}&nbsp;人</div>
        </div>
        <div class="am-list-item">
          <div class="am-list-content">总计:</div>
          <div class="orange am-ft-xl">￥{{total}}</div>
        </div>
      </div>
      <div class="am-list">
        <a @click.stop="linkNotice" class="am-list-item">
          <div class="am-list-content">
            <div class="am-list-title">拼场须知</div>
          </div>
          <div class="am-list-arrow" aria-hidden="true">
            <span class="am-icon arrow horizontal"></span>
          </div>
        </a>
      </div>

      <div class="am-list am-list-form">
        <div class="am-list-item">
          <div class="am-list-content">
            预定信息
          </div>
        </div>
        <div class="am-list-item">
          <div class="am-list-content">姓名</div>
          <div class="am-list-extra"><input class="am-ft-right" type="text" placeholder="请输入姓名" value="" /></div>
        </div>
        <div class="am-list-item">
          <div class="am-list-content">手机号码</div>
          <div class="am-list-extra"><input class="am-ft-right" type="number" placeholder="请输入手机号" value="" /></div>
        </div>
      </div>
      <div class="am-list booking-tip">
        <ul>
          <li>
            <span></span>开场前30分钟凭手机号入场</li>
          <li>
            <span></span>提前3小时可随时取消</li>
        </ul>
      </div>
    </div>
    <div class="am-fixed am-fixed-bottom">
      <button class="am-button" style="border-radius:0">确定</button>
    </div>
  </div>
</template>
<script>
import http from '@/services/xhr';
import apiSetting from '@/services/api';

export default {
  data() {
    return {
      isLoad: false,
      info: {},
      id: this.$route.params.id,
      male: 0,
      lady: 0
    };
  },
  computed: {
    total() {
      return this.info.price * (this.male + this.lady);
    }
  },
  mounted() {
    let data = {
      test: this.id
    };
    http(apiSetting.getDetail, data).then(res => {
      this.info = res.data.data.info;
      this.isLoad = true;
    });
  },
  methods: {
    plus(type) {
      switch (type) {
        case 'male':
          this.male++;
          break;
        case 'lady':
          this.lady++;
          break;
      }
    },
    minus(type) {
      switch (type) {
        case 'male':
          if (this.male === 0) {
            return;
          }
          this.male--;
          break;
        case 'lady':
          if (this.lady === 0) {
            return;
          }
          this.lady--;
          break;
      }
    },
    linkNotice() {
      this.$router.push({ path: '/notice' });
    }
  }
};
</script>
